<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 11:43:54
-->
<template>
  <!-- <div class="header">
    <div class="wrapper">
      <div class="logo">
        <img :src="logo" alt="">
      </div>
      <div class="title" @click="toIndex">{{name}}</div>
      <ul class="category">
        <li v-for="item in categories" 
          @click="toList(item.id)"
          :key="item.id">
          {{item.name}}
        </li>
      </ul>
      <div class="contact">
        <i>phone</i>
        <a href="">联系我们</a>
      </div>
    </div>
  </div> -->
  <div>
        <!--头部-->
    <div class="head">
        <div class="w1248">
            <div class="fl logo">
              <img :src="logo" @click="toIndex()" alt="图片显示">
            </div>
            <div class="fr">
                <ul class="te-align fl">
                    <li>网上校史馆</li>
                    |
                    <li @click="toLake()">孔目湖讲坛</li>
                    |
                    <li>交大风光</li>
                    |
                    <li>高级检索</li>
                </ul>
            </div>
        </div>
        
        <!--导航-->
        <ul class="category w1248">
            <li @click="toIndex()" >{{homeIndex[0].name}}</li>
            <li v-for="item in categories" 
            @click="toList(item.id,item.name)"
              :key="item.id">
              {{item.name}}
            </li>
            <li class="home"><img @click="toIndex()" src="/images/home.png"></li>
        </ul>
        <!--/导航-->
    </div>
    <!--/头部-->
  </div>
</template>
<script>
import {get} from '../../utils/request'
export default{
  data(){
    return {
      categories:[],
      homeIndex:[],
      logo:''
    }
  },
  methods:{
        // 跳转回首页
    toIndex(){
      this.$router.push({path:"/"})
    },
    // 跳转到列表页面
    toList(categoryId,name){
      this.$router.push({
        path:'/list',
        query:{categoryId,name}
      })
    },
    //跳转到孔目湖页面
    toLake(){
      this.$router.push({
        path:'/lake',
      })
    },
    //加载栏目
    LoadCategories(){
      let url = "/index/category/findAll";
      let temp;
      get(url).then(resp => {
        temp = resp.data;
        this.homeIndex = temp;
        this.categories =temp.splice(1,7);
      })
    },
    //加载logo
      loadWebLogo(){
      let url = "/index/findByKey";
      get(url,{name:'logo'}).then(resp => {
        if(resp.data){
          this.logo = resp.data.val;
        }
      })
    }
  },
  created(){
    this.LoadCategories();
    this.loadWebLogo();
  }
}
</script>

<style scoped>
        li {
            list-style: none;
            cursor: pointer;
        }
        .head{
            height: 155px;
            background:url(/images/head.png) repeat-x center;
            width: 100%;
        }
        .w1248 {
            width: 1248px;
            margin: 0 auto;
            position: relative;
            display: table;
        }
        .fl {
            float: left;
        }
        .logo {
            padding: 20px 0 0 20px;
            cursor: pointer;
        }
        .head .fr {
            height: 32px;
            width: 420px;
            line-height: 32px;
            margin-top: 44px;
            position: relative;
            float: right;
        }
        .head .fr ul {
            color: #fff;
        }
        .te-align {
            text-align: center;
        }
        .head .fr ul li {
            color: #fff;
            font-size: 14px;
            padding: 0 10px;
            display: inline;
            font-family: 'Microsoft YaHei';
        }
        .category {
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .category li {
            font-weight: normal;
            font-size: 16px;
            height: 50px;
        }
        .category li{
            display: block;
            line-height: 50px;
            width: 122px;
            text-align: center;
            color: #FFF;
            text-decoration: none;
        }
        .category li:hover{
            color: #ff4c19;
        }
        .category .home a {
            width: 18p;
        }
</style>
